<template>
  <div>
    <div class="home-bgTop-1etSz">
      <div class="home-homeWrap-1Bimw">
        <div class="left_side-leftSideBar-3udhT" style="height: 1000px;">
          <div class="left_side-navWrap-1UNkc">
            <!--            <div class="left_side-navAtest-267UK">-->
            <!--              <div class="LevItem-lev-1pRwS">-->
            <!--                <div style="margin-top: 30px">-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">我的关注</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">我赞过的</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">我收藏的</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">热门推荐</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">排行榜</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                  <el-row :gutter="20">-->
            <!--                    <el-col :span="6">-->
            <!--                      <div class="grid-content bg-purple" style="width: 120px;margin-top: 20px">热门推荐</div>-->
            <!--                    </el-col>-->
            <!--                  </el-row>-->
            <!--                  <br/>-->
            <!--                </div>-->

            <!--              </div>-->
            <!--            </div>-->
            <el-tabs :tab-position="tabPosition" v-model="choose" @tab-click="handleOpen">
              <el-tab-pane label="我关注的" name="main"></el-tab-pane>
              <el-tab-pane label="我赞过的" name="like"></el-tab-pane>
              <el-tab-pane label="我收藏的" name="favor"></el-tab-pane>
              <el-tab-pane label="热门推荐" name="hotwbs"></el-tab-pane>
              <!--<el-tab-pane label="排行榜" name="homeRank"></el-tab-pane>-->
            </el-tabs>
          </div>
        </div>
        <div class="home-homeMain-3GZKG">
          <!--          <div class="home-centerMain-3QDm0">-->
          <!--            <div class="main_hot-mainHot-1Jirj">-->
          <!--              <div class="main_hot-classifyTab-1A1LM">-->
          <!--                <div class="main_hot-navItem-2jdYB main_hot-navItemActive-13nfx"><span>全部</span>-->
          <!--                  <div class="main_hot-iconUnActive-5jKjq main_hot-iconActive-2YHzr"></div>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--              <el-row>-->
          <!--                <el-col :span="24" v-for="(o, index) in 10" :key="o">-->
          <!--                  <el-card :body-style="{ padding: '0px' }" style=" border-radius: 20px;">-->
          <!--                    <img-->
          <!--                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
          <!--                      class="image">-->
          <!--                    <b>-->
          <!--                      <div class="name">旭旭宝宝</div>-->
          <!--                    </b>-->
          <!--                    <div class="create">发布于旭旭宝宝的铁吧</div>-->
          <!--                    <div>-->
          <!--                      &nbsp&nbsp今年前后历经三个月时间，7000件左右的红12装备上完了，最终剩下了71件红15和3件红16，虽然过程比较坎坷，还经历了一波只有10万分之3几率的43连碎，但总体下来的概率基本是符合之前公布的概率的（12上13开始几率都是百分20，有宠物秘药的情况下可以提升百分之一左右），最终实际情况12上13是几率是百分21.11，13上14的几率是百分21.05，14冲15的几率是百分24.76-->
          <!--                    </div>-->
          <!--                    <div style="padding: 0px;">-->
          <!--                      <div class="tableTitle"><span class="midText"></span></div>-->
          <!--                      <el-button :plain="true" class="el-icon-star-off" @click="collect">收藏</el-button>-->
          <!--                      <el-button :plain="true" class="el-icon-chat-line-round" @click="talk"></el-button>-->
          <!--                      <el-button :plain="true" class="icon-zanpress" @click="collect">点赞</el-button>-->
          <!--&lt;!&ndash;                      <div style="position: absolute;background-color: #42b983">&ndash;&gt;-->
          <!--&lt;!&ndash;                        1&ndash;&gt;-->
          <!--&lt;!&ndash;                      </div>&ndash;&gt;-->
          <!--                      <div class="bottom clearfix">-->
          <!--                      </div>-->
          <!--                    </div>-->
          <!--                  </el-card>-->
          <!--                </el-col>-->
          <!--              </el-row>-->
          <!--            </div>-->
          <!--          </div>-->
          <router-view></router-view>
          <div class="right_side-rightSideBar-q6eN1">
            <div>
              <div style="position: relative;margin-top: -4795px;">
                <div id="fixedScroll" class="fix-fixedWrap-3W9Dt">
                  <div class="hot-hotTopic-18OoV">
                    <p class="hot-title-jo_13">
                      "热门话题"
                    </p>
                    <div class="tableTitle1"><span class="midText1"></span></div>
                    <ul class="hot-hotTopicList-3GkEy" style="margin-left: -30px">
                      视频秀一秀
                    </ul>
                    <ul class="hot-hotTopicList-3GkEy" style="margin-left: -30px">
                      2020斗鱼时光机
                    </ul>
                    <ul class="hot-hotTopicList-3GkEy" style="margin-left: -30px">
                      记录你的一天
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      tabPosition: 'left',
      choose: ''
    };
  },
  methods: {
    handleOpen() {
      if (this.choose == "main") {
        this.$router.push("/main");
      }
      if (this.choose == "like") {
        this.$router.push("/like");
      }
      if (this.choose == "favor") {
        this.$router.push("/favor");
      }
      if (this.choose == "hotwbs") {
        this.$router.push("/hotwbs");
      }
      if (this.choose == "homeRank") {
        this.$router.push("/homeRank");
      }
    },

  }
}
</script>
<style>

@import url(../assets/font_3jd5z76gzaf/iconfont.css);

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-tabs__item {
  font-size: 20px !important;
  padding: 10px 0 50px !important;
  width: 150px !important;
  margin-top: 10px;
}
</style>

<style scoped>
.home-homeWrap-1Bimw {
  padding-top: 10px;
  min-height: 910px;
  margin: 0 auto;
  width: 70%;
  background: rgba(43, 52, 59, .15);
}

/*.LevItem-lev-1pRwS {*/
/*  display: block;*/
/*  font-size: 20px;*/
/*  color: black;*/
/*  padding-left: 20px;*/
/*}*/

.left_side-leftSideBar-3udhT {
  position: fixed;
  width: 200px;
  display: inline-block;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  font-size: 14px;
  margin-right: 10px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 6px hsla(0, 0%, 60%, .12);
  box-shadow: 0 1px 6px hsla(0, 0%, 60%, .12);
  z-index: 0;
}

.left_side-navWrap-1UNkc {
  z-index: 10;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  -webkit-transition: margin-top .3s ease;
  -o-transition: margin-top .3s ease;
  transition: margin-top .3s ease;
  will-change: margin-top, top;
  width: 100%;
}
</style>
<style>
.home-homeMain-3GZKG {
  margin-left: 150px;
  width: 1200px;
  min-height: 890px;
  display: inline-block;
}

/*.home-centerMain-3QDm0 {*/
/*  display: inline-block;*/
/*  width: 800px;*/
/*}*/

/*.main_hot-mainHot-1Jirj {*/
/*  width: 800px;*/
/*  display: inline-block;*/
/*  margin-right: 10px;*/
/*}*/

* {
  word-break: break-all;
}

/*.main_hot-classifyTab-1A1LM {*/
/*  position: relative;*/
/*  width: 100%;*/
/*  height: 50px;*/
/*  line-height: 50px;*/
/*  display: inline-block;*/
/*  background-color: #f7f7f7;*/
/*  border-radius: 12px;*/
/*  margin-bottom: 10px;*/
/*}*/

/*.main_hot-navItem-2jdYB {*/
/*  height: 50px;*/
/*  line-height: 50px;*/
/*  margin-right: 10px;*/
/*  display: inline-block;*/
/*  font-size: 16px;*/
/*  text-align: center;*/
/*  cursor: pointer;*/
/*}*/

/*.main_hot-iconUnActive-5jKjq.main_hot-iconActive-2YHzr {*/
/*  display: block;*/
/*  border-radius: 4px 4px 0 0;*/
/*  width: 30px;*/
/*  height: 4px;*/
/*  background: #fa8c16;*/
/*  margin: -4.8px auto 0;*/
/*}*/
</style>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  margin-left: 10px;
  margin-top: 15px;
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 500px;
}

.name {
  margin-left: 70px;
  margin-top: -35px;
  margin-bottom: 200px;
  font-size: 20px;
}

.create {
  margin-left: 70px;
  margin-top: -200px;
  color: #ff5d23;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.tableTitle {
  position: relative;
  margin: 0 auto;
  height: 10px;
  background-color: black;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
</style>
<style>
/*.left_side-navAtest-267UK {*/
/*  width: 100%;*/
/*}*/

.right_side-rightSideBar-q6eN1 {
  position: fixed;
  margin-top: -10px;
  width: 330px;
  margin-left: 900px;
  display: inline-block;
  vertical-align: top;
}

.fix-fixedWrap-3W9Dt {
  margin-top: -3px;
}

.hot-hotTopic-18OoV {
  background: #fff;
  height: 500px;
  /*border-radius: 4px;*/
  margin-bottom: 10px;
  border-radius: 12px;
}

.hot-title-jo_13 {
  font-size: 14px;
  color: #3c3c3c;
  padding: 16px;
  border-bottom: 1px solid #eee;
  position: relative;
  font-weight: 700;
}

.tableTitle1 {
  /*position: relative;*/
  /*margin: 0 auto;*/
  height: 1px;
  /*background-color: black;*/
  font-size: 16px;
  color: rgb(101, 101, 101);
}

.hot-hotTopicList-3GkEy {
  overflow: hidden;
  margin-top: 6px;
  height: 100px;
}

.hot-hotTopicList-3GkEy li {
  height: 50px;
  line-height: 18px;
  font-size: 13px;
  color: #42b983;
  margin: 17px 16px;
}
</style>
